<template lang="pug">
    div#order
        div.types
            div(@click="changeState(0)",:class="{active:currentState==0}") 已预约
            div(@click="changeState(2)",:class="{active:currentState==2}") 已取消
            div(@click="changeState(3)",:class="{active:currentState==3}") 已违约
            div(@click="changeState(1)",:class="{active:currentState==1}") 已完成
        yd-infinitescroll(:callback="nextPage",ref="scroll")
            div(slot="list")
                oppointment(v-for="order in orders",:key="order.id",:order="order")
</template>
<script>
import Oppointment from "../components/Oppointment.vue";
import _ from "lodash";
export default {
  components: {
    Oppointment
  },
  data() {
    return {
      currentState: 0,
      page: 1,
      total: 0,
      orders: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    changeState(state) {
      if (this.currentState == state) return;
      this.currentState = state;
      this.getData();
    },
    getData() {
      this.page = 1;
      this.$refs.scroll.$emit("ydui.infinitescroll.reInit");
      this.$api.v1
        .order_searchUserOrders_post({
          data: {
            uid: window.data.uid,
            state: this.currentState,
            rows: 10,
            page: this.page
          }
        })
        .then(resp => {
          this.total = resp.data.total;
          this.orders = resp.data.rows;
        });
    },
    nextPage() {
      if (this.total / 10 < this.page) {
        this.$refs.scroll.$emit("ydui.infinitescroll.loadedDone");
        return;
      }
      this.page += 1;
      this.$api.v1
        .order_searchUserOrders_post({
          data: {
            uid: window.data.uid,
            state: this.currentState,
            rows: 10,
            page: this.page
          }
        })
        .then(resp => {
          this.orders = _.concat(this.orders, resp.data.rows);
          this.$refs.scroll.$emit("ydui.infinitescroll.finishLoad");
        })
        .catch(() => {
          this.$refs.scroll.$emit("ydui.infinitescroll.reInit");
        });
    }
  }
};
</script>
<style lang="stylus" scoped>
#order {
  .types {
    display: flex;
    height: 1rem;
    line-height: 1rem;
    justify-content: space-around;
    background-color: #fff;
    font-size: 0.3rem;
    margin-bottom: 0.2rem;

    &>div {
      text-align: center;
      width: 1.2rem;
      border-bottom: solid 0.1rem transparent;

      &.active {
        border-bottom-color: #ac0e0e;
      }
    }
  }

  .oppointment {
    border-bottom: solid 1px #ccc;

    &:last-child {
      border-bottom-color: transparent;
    }
  }
}
</style>

